import { reactive, computed, type ComputedRef } from 'vue'
import { defineStore } from 'pinia'
import cover from '@/assets/cover.png'

export interface ITemplateProps {
  id: number;
  title: string;
  coverImg: string;
  author: string;
  copiedCount: number;
  isHot: boolean;
  isNew: boolean;
}

interface ITemplatesStore {
  templates: ITemplateProps[];
  templateById2: ComputedRef<ITemplateProps | undefined>;
}

export const testData:ITemplateProps[] = [
  {
    id: 1, coverImg: cover, title: '前端架构师海报1',
    author: 'devin', copiedCount: 20, isHot: true, isNew: false
  },
  {
    id: 2, coverImg: cover, title: '前端架构师海报2',
    author: 'devin', copiedCount: 23, isHot: false, isNew: true
  },
  {
    id: 3, coverImg: cover, title: '前端架构师海报3',
    author: 'devin', copiedCount: 24, isHot: true, isNew: false
  },
  {
    id: 4, coverImg: cover, title: '前端架构师海报4',
    author: 'devin', copiedCount: 25, isHot: true, isNew: false
  },
  {
    id: 5, coverImg: cover, title: '前端架构师海报5',
    author: 'devin', copiedCount: 26, isHot: true, isNew: false
  },
  {
    id: 6, coverImg: cover, title: '前端架构师海报6',
    author: 'devin', copiedCount: 28, isHot: true, isNew: false
  },
]

export const useTemplatesStore = defineStore('templates', ():ITemplatesStore => {
  const templates = reactive(testData)
  const templateById2 = computed(() => templates.find(t => t.id === 2))
  return {
    templates,
    templateById2
  }
})

